<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
	<head>
		<meta charset="utf-8">
		<title>持明法洲轮播图页面</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
		<script src="../js/jquery-1.8.3.js"></script>
	</head>
	
	<body>
	<h1>轮播图页面</h1>

	<!--添加表格表单-->
	<form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 5px 30px 0px 0px" enctype="multipart/form-data">
		<div class="layui-form-item">
			<label class="layui-form-label">轮播图原有名称</label>
			<div class="layui-input-block">
				<input type="text" name="bannerOldName" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">上传图片</label>
			<div class="layui-input-block">
				<button type="button" class="layui-btn" id="upload1">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<input type="radio" name="bannerState" value="0" title="删除">
				<input type="radio" name="bannerState" value="1" title="正常" checked>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">上传时间</label>
			<div class="layui-input-block">
				<input type="text" name="bannerDate" id="test1"  class="layui-input" >
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">描述</label>
			<div class="layui-input-block">
				<input type="text" name="bannerDescription" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<!--修改表格表单-->
	<form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 5px 30px 0px 0px" enctype="multipart/form-data">
		<div class="layui-form-item">
			<label class="layui-form-label">轮播图原有名称</label>
			<div class="layui-input-block">
				<input type="hidden" name="bannerId">
				<input type="text" name="bannerOldName" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">上传图片</label>
			<div class="layui-input-block">
				<button type="button" class="layui-btn" id="upload2">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<input type="radio" name="bannerState" value="0" title="删除">
				<input type="radio" name="bannerState" value="1" title="正常" checked>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">上传时间</label>
			<div class="layui-input-block">
				<input type="text" name="bannerDate" id="test2"  class="layui-input" >
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">描述</label>
			<div class="layui-input-block">
				<input type="text" name="bannerDescription" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>


	<div>
		<button id="deleteAll" class="layui-btn">删除选中</button>
		<button id="add" class="layui-btn">添加</button>
	</div>

	  <table  id="demo" lay-filter="tableFilter"></table>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
	</script>


	<script type="text/html" id="img">
		<img src="${pageContext.request.contextPath}{{d.bannerImageUrl}}" width="50px" hidden="50px" />
	</script>

	<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

	<script >
		layui.use(['table','form','laydate','upload','layer','jquery'], function(){
			var table = layui.table;
			var form = layui.form;
			var laydate = layui.laydate;
			var  layer=layui.layer;
			var  upload=layui.upload;
			var $ =layui.jquery;
			//日期组件
			laydate.render({
				elem:"#test1"
			})

			laydate.render({
				elem:"#test2"
			})
			//表格动态展示
			//第一个实例
			table.render({
				elem: '#demo'
				,height: 312
				,url: '${pageContext.request.contextPath}/banner/selectAll' //数据接口
				,page: true //开启分页
				,limit:3
				,limits:[3,6,9]
				,cols: [[ //表头
					{type:'checkbox', fixed: 'left'}
					,{field: 'bannerId', title: '编号', width:80, sort: true}
					,{field: 'bannerImageUrl', title: '轮播图', width:150,templet:"#img"}
					,{field: 'bannerOldName', title: '轮播图名', width:120, sort: true}
					,{field: 'bannerDate', title: '轮播图上传时间', width: 177}
					,{field: 'bannerState', title: '状态', width:120,templet:function(d){
							if (d.bannerState==0){
								return  '删除';
							} else{
								return '正常';
							}
						}}
					,{field: 'bannerDescription', title: '描述', width: 80}
					,{title:'操作',toolbar:'#barDemo'}


				]]
			});

			$("#add").click(function () {
				layer.open({
					type:1
					,title:'添加页面'
					,content:$("#addForm")
				})
			})
			//-----添加功能  start------

			//文件上传 start-----
			upload.render({
				elem: '#upload1' //绑定元素
				// ,auto:false //auto:false,禁止自动上传,默认自动上传
				// ,bindAction:'#btn1'
				,url: '${pageContext.request.contextPath}/banner/upload' //上传接口
				,done: function(res){
					//上传完毕回调
					form.val('addFormFilter',{
						bannerImageUrl:res.newName
					})
				}
				,error: function(){
					//请求异常回调
					console.log("上传异常")
				}
			});
			//-----文件上传   end  -----


			//监听提交
			form.on('submit(formDemo)', function(data){
				layer.msg(JSON.stringify(data.field));
				$.ajax({
					url:'${pageContext.request.contextPath}/banner/insert'
					,data:$("#addForm").serialize()
					,success:function(result){
						if(result.flag){
							layer.closeAll();//关闭添加界面的弹出层
							$("#addForm")[0].reset();//使用js中的reset方法清空表单中的数据
							layer.msg("添加成功!!!!");
							table.reload("demo")//重载表格
						}else{
							layer.msg("添加异常!!!!")
						}
					}
				})
				return false;
			});
			//------添加功能end-----

			//文件上传 start-----
			upload.render({
				elem: '#upload2' //绑定元素
				// ,auto:false //auto:false,禁止自动上传,默认自动上传
				// ,bindAction:'#btn1'
				,url: '${pageContext.request.contextPath}/banner/upload' //上传接口
				,done: function(res){
					//上传完毕回调
					form.val('addFormFilter',{
						bannerImageUrl:res.newName
					})
				}
				,error: function(){
					//请求异常回调
					console.log("上传异常")
				}
			});
			//-----文件上传   end  -----

			//table事件监听器  控制监听  编辑和删除
			table.on('tool(tableFilter)',function (obj) {
				var data=obj.data;

				console.log(data)
				if (obj.event=='edit'){
					layer.open({
						type:1
						,title:'修改页面'
						,content:$("#updateForm")

					})

					$.ajax({
						url:'${pageContext.request.contextPath}/banner/selectOne'
						,data:'id='+obj.data.bannerId
						,dataType:'json'
						,success:function (result) {

							form.val('updateFormFilter',result)
						}
					})
				}else if(obj.event=='del'){
					layer.confirm('确定要删除吗,亲!',function (index) {
						$.ajax({
							url:'${pageContext.request.contextPath}/banner/delete'
							,data:'id='+obj.data.bannerId
							,dataType:'json'
							,success:function (result) {
								if(result.flag){
									layer.msg('删除成功');
									table.reload('demo');
								}
							}
						})
						layer.close(index);
					})

				}
			});
			//---修改功能  start------
			form.on('submit(update)', function(data){
				layer.msg(JSON.stringify(data.field));
				$.ajax({
					url:'${pageContext.request.contextPath}/banner/update'
					,data:$("#updateForm").serialize()
					,dataType:'json'
					,success:function(result){
						if(result.flag){

							//隐藏修改弹出层
							layer.closeAll();
							//提示修改层
							layer.msg("修改成功!!!!");
							//表格重载
							table.reload("demo")
						}
					}
				})
				return false;
			});
			//    ------修改功能结束--------

		});
	</script>
	</body>
</html>
